<template>
  <div class="music">
    <!-- 头部搜索框 -->
    <div class="header">
      <div class="city">{{ City }}</div>
      <div class="search">
        <img src="../../assets/images/icon/search.png" alt="" />
        <input type="text" placeholder="你的名字" v-model="value" @keyup.enter="goSearch" />
      </div>
    </div>

    <!-- banner轮播图 -->
    <div class="banner">
      <Banner :banners="banners"></Banner>
    </div>

    <!-- 歌曲列表 -->
    <MusicList :Songs="hotSongs">
        <img slot="icon" src="../../assets/images/icon/hot.png" alt="">
        <span slot="title">热门歌曲</span>
        <span slot="more" @click="goHotMore">更多></span>
    </MusicList>

    <MusicList :Songs="newSongs">
        <img slot="icon" src="../../assets/images/icon/new.png" alt="">
        <span slot="title">最新音乐</span>
        <span slot="more" @click="goNewMore">更多></span>
    </MusicList>

    <MusicList :Songs="Dj">
        <img slot="icon" src="../../assets/images/icon/dj.png" alt="">
        <span slot="title">主播电台</span>
        <span slot="more" @click="goDjMore">更多></span>
    </MusicList>
  </div>
</template>

<script>
import Banner from "../../components/Banner.vue";
import MusicList from "../../components/MusicList.vue"
import jsonpAdapter from "axios-jsonp";
export default {
  data() {
    return {
      City: "",
      banners: [],
      hotSongs:[],
      newSongs:[],
      Dj:[],
      value:"",
    };
  },
  components: {
    Banner,
    MusicList
  },
  mounted() {
    this.$http(`http://122.112.161.135:3000/banner`).then((res) => {
      this.banners = res.data.banners;
    });
    this.$http(`http://122.112.161.135:3000/top/playlist/highquality`).then(res=>{
        this.hotSongs = res.data.playlists.slice(0,3)
    });
    this.$http(`http://122.112.161.135:3000/album/newest`).then(res=>{
        var newSongs = res.data.albums
        this.newSongs = newSongs.map(item=>{
            item.coverImgUrl = item.picUrl
            return item
        }).slice(0,3)
    });
    this.$http(`http://122.112.161.135:3000/personalized/djprogram`).then(res=>{
        var Dj = res.data.result;
        this.Dj = Dj.map(item=>{
            item.coverImgUrl = item.picUrl;
            return item
        }).slice(0,3)
    });
    this.$http({
      url: `https://apis.map.qq.com/ws/location/v1/ip`,
      method: "get",
      params: {
        key: "23NBZ-R2B36-ZK2SU-MRIQS-KWFL6-QUFPQ",
        output: "jsonp",
      },
      adapter: jsonpAdapter,
    }).then((res) => {
      this.City = res.data.result.ad_info.city.slice(0, 2);
    })
  },
  methods:{
      goHotMore(){
          this.$router.push("/music/hotmusic")
      },
      goNewMore(){
          this.$router.push("/music/newmusic")
      },
      goDjMore(){
          this.$router.push("/music/djmusic")
      },
      goSearch(){
          this.$router.push(`/music/search/${this.value}`)
      }
  }
};
</script>

<style scoped>
.music {
  background: linear-gradient(to bottom, #dce2e2, #fff);
}
.header {
  display: flex;
  align-items: center;
  /* background-color: #e0e4e5; */
  padding: 0.2rem 0;
}
.city {
  margin: 0 0.3rem 0 0.2rem;
  font-size: 0.4rem;
}
.search {
  position: relative;
  margin: 0.2rem 0;
}
.search input {
  width: 8rem;
  height: 0.8rem;
  border-radius: 0.5rem;
  border: none;
  outline: none;
  padding-left: 1rem;
  box-sizing: border-box;
  font-size: 0.4rem;
}
.search img {
  position: absolute;
  left: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
}


.banner {
  width: 96%;
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden;
}



</style>